<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Google Visualization API Sample</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
      google.load('visualization', '1', {packages:['table']});
      google.load('visualization', '1', {packages:['annotatedtimeline']});
      google.setOnLoadCallback(drawTable);
      google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
       	var data = new google.visualization.DataTable();
      	data.addColumn('datetime', 'Date');
      	data.addColumn('number', '# of Records');
      	data.addColumn('string', 'comment');
      	data.addRows(<%= @fact_count_by_src_ips_detail.size %>);
      		<% for i in 0...@fact_count_by_src_ips_detail.size %>
  					data.setValue(<%= i %>, 0, new Date(<%= @fact_count_by_src_ips_detail[i].timestamp * 1000 %>));
        			data.setValue(<%= i %>, 1, <%= @fact_count_by_src_ips_detail[i].calls %>);
        			<% if @fact_count_by_src_ips_detail[i].calls > 200 %>
        				data.setValue(<%= i %>, 2, '# of calls exceeded 200. any annotation?');
        			<% end %>
			<% end %>
        var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('annot_div'));
		  
		var options = {};
		options['displayAnnotations'] = true;
		options['width'] = '1300px';
 		
        annotatedtimeline.draw(data, options);
      }

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Source Ip');
        data.addColumn('string', 'Time');
        data.addColumn('number', '# of Records');
        data.addRows(<%= @fact_count_by_src_ips_detail.size %>);
        <%for i in 0..@fact_count_by_src_ips_detail.size-1%>
        	data.setCell(<%=i%>, 0, '<%= @fact_count_by_src_ips_detail[i].src_ip %>');
        	data.setCell(<%=i%>, 1, '<%= fromUnix @fact_count_by_src_ips_detail[i].timestamp %>');
        	data.setCell(<%=i%>, 2, <%= @fact_count_by_src_ips_detail[i].calls %>);
        <%end%>
        

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true, width: 900});
      }
    </script>
</head>
<div id="annot_div" style="width: 1300px; height: 600px;"></div><br />
<div id="table_div"></div>
  


